<template>
  <div class="user">
    <user-search
      @handle-query="handleQueryClick"
      @handle-reset="handleResetClick"
      ref="userSearchRef"
    />
    <user-content
      ref="userContentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    />
    <user-modal ref="userModalRef" />
  </div>
</template>

<script setup lang="ts">
import UserSearch from './c-cpns/user-search.vue'
import UserContent from './c-cpns/user-content.vue'
import UserModal from './c-cpns/user-modal.vue'
import { ref } from 'vue'

const userSearchRef = ref<InstanceType<typeof UserSearch>>()
const userContentRef = ref<InstanceType<typeof UserContent>>()
const userModalRef = ref<InstanceType<typeof UserModal>>()

function handleQueryClick(queryInfo: any) {
  userContentRef.value?.fetchUserListData(queryInfo)
}

function handleResetClick() {
  userContentRef.value?.fetchUserListData()
}

// 对modal组件的操作
function handleNewClick() {
  userModalRef.value?.setModalVisible()
}
function handleEditClick(itemData: any) {
  console.log(itemData)
  userModalRef.value?.setModalVisible(false, itemData)
}
</script>

<style lang="less" scoped>
.user {
  border-radius: 8px;
  overflow: hidden;
}
</style>
